<template>
	<view class="box-c">
		<view class="bg-box py-2 px-3 order-info ">
			<view class="title">
				订单信息
			</view>
			<view class="line my-1"></view>
			<view class="box d-jc-sb ">
				<text>订单编号</text>
				<text>{{orderInfo.orderNumber}}</text>
			</view>
			<view class="box d-jc-sb mt-1">
				<text>下单时间</text>
				<text>{{orderInfo.createTime}}</text>
			</view>
			<view class="line my-1"></view>
			<view class="box d-jc-sb">
				<text>付款总额</text>
				<text>{{orderInfo.goodsPrice}}积分</text>
			</view>

		</view>
		<view class="bg-box py-2 px-3 order-content">
			<view class="title">
				订单内容
			</view>
			<view class="line my-1"></view>
			<view class="">
				<view class="box content d-ai-c my-2 " :class="item.verificationStatus==0?'':'img-gray'"
					v-for="(item,index) in orderInfo.goodSkuDto">
					<view class="flex-1 ">
						<text class="iconfont" :class="(checkedArr.indexOf(item.goodsId)>=0) || item.verificationStatus!=0 ?'icon-dui':'icon-quan'"
							@tap='chooseChecked(item)'></text>
					</view>
					<view class="flex-8 box ml-1 " :class="item.verificationStatus==0?'':'text-line'">
						<view class="box d-jc-c ">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="box-c d-jc-sb ml-1">
							<text class="title">{{item.goodsName}}</text>
							<text class="text-pink">{{item.goodsPrice}}积分</text>
						</view>
					</view>
					<view class="flex-1 box"  :class="item.verificationStatus==0?'':'text-line'">
						<text class="number">x{{item.number}}</text>

					</view>
				</view>
			</view>

		</view>
		<view class="bottom box d-jc-c" @tap="destroyOrder">
			<text>确认核销</text>
		</view>


	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedArr: [],
				orderInfo: this.$store.state.orderInfo

			}
		},
		onLoad() {
			// this.getOrderinfo()
		},
		methods: {
		
			destroyOrder(){
				if(this.checkedArr.length<1){
					uni.showToast({
						title: '请选择核销商品',
						duration: 1000,
						icon: "none"
					});
					return;
				}
				this.$api.destroyOrder({
					orderNumber:this.orderInfo.orderNumber,
					goodsIds:this.checkedArr
				}).then((res) => {
					if(res.data.success){
						uni.showToast({
							title: '核销成功',
							duration: 1000,
							icon: "none"
						});
						uni.navigateBack(1)
					}else{
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
					}
				})
			},
			
			chooseChecked(item) {
				if(item.verificationStatus==1){
					uni.showToast({
						title: '订单已被核销',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(item.verificationStatus==2){
					uni.showToast({
						title: '订单已被退款',
						duration: 1000,
						icon: "none"
					});
					return
				}
				let i = this.checkedArr.indexOf(item.goodsId);
				console.log(i)
				if (i >= 0) {
					this.checkedArr.splice(i, 1)
				} else {
					this.checkedArr.push(item.goodsId)
				}

				console.log(JSON.stringify(this.checkedArr))

			}


		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f8f8f8;

		.bottom {
			width: 100%;
			height: 100rpx;
			background-color: #FF5551;
			position: absolute;
			bottom: 0rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			color: #fff;
		}

		.order-content {
			margin-top: 30rpx;

			.icon-quan {
				font-size: 30rpx;
			}

			.content {
				.text-line {
					text {
						text-decoration: line-through
					}
				}

				.icon-dui {
					color: #FF5551 !important;
				}

				.number {
					color: #666666;
					font-size: 30rpx;
					width: 100rpx;
					text-align: end;
					margin-top: 55rpx;
				}

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 10rpx;
				}

				view:nth-child(1) {
					text {
						font-size: 42rpx;
						color: #CCCCCC;
					}

				}
			}
		}

		.order-info {
			margin-top: 30rpx;

			view:nth-child(3),
			view:nth-child(4) {
				font-size: 26rpx;

				text:nth-child(1) {
					color: #999999;
				}

				text:nth-child(2) {
					color: #666666;
				}
			}

			view:nth-child(6) {
				font-size: 30rpx;

				text:nth-child(1) {
					color: #999999;
				}

				text:nth-child(2) {
					color: #FF5551;
				}
			}


		}

		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #EEEEEE;
		}
	}
</style>
